<template>
  <div class="app-container" style="padding:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="searchObj.name" placeholder="讲师"/>
      </el-form-item>
      <el-form-item >
        <el-select v-model="searchObj.level" placeholder="讲师头衔">
          <el-option label="高级讲师" value="1"/>
          <el-option label="特级讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          v-model="searchObj.joinDateBegin"
          type="date"
          placeholder="起始日期"/>
        <el-date-picker
          v-model="searchObj.joinDateEnd"
          type="date"
          placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryByCondition">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 批量删除按钮 -->
    <div style="text-align:right;margin-right:20px">
      <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
    </div>

    <!-- 页面标签内容 -->
    <el-table
      :data="teacherList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>

      <el-table-column
        type="index"
        width="50"/>
      <el-table-column prop="name" label="姓名" width="100"/>
      <el-table-column
        prop="avatar"
        label="头像"
        width="110">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:100px;height:100px" alt="">
          <img v-else src="https://0526guli.oss-cn-shanghai.aliyuncs.com/avatar/default.jpg" style="width:100px;height:100px" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="简介" show-overflow-tooltip/>

      <el-table-column prop="career" label="履历" show-overflow-tooltip/>
      <!-- <el-table-column prop="level" label="职称" width="100"
                :filters="[{ text: '高级讲师', value: '高级讲师' }, { text: '特级讲师', value: '特级讲师' }]" :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.level === '高级讲师' ? 'primary' : 'success'" disable-transitions>
                        {{scope.row.level}</el-tag>
                </template>
            </el-table-column> -->
      <el-table-column prop="level" label="头衔">
        <template slot-scope="scope">
          <el-tag :type="scope.row.level===1?'success':'danger'" disable-transitions>
            {{ scope.row.level === 1? '高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80"/>
      <el-table-column prop="joinDate" label="入职日期" width="200"/>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:200px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>

</template>
<script>
import teacherApi from '@/api/teacher'

export default {
  data() {
    return {
      teacherList: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      searchObj: {},
      checkedTeachers: [] // 代表选中要删除的讲师集合
    }
  },
  created() {
    // this.getTeachers()
    this.pageList()
  },
  methods: {
    // 批量删除单击事件
    handleBatchDel() {
      if (this.checkedTeachers.length === 0) {
        this.$message.warning('请选中要删除的讲师')
        return
      }
      // 获取选中要删除讲师id集合
      const ids = []
      this.checkedTeachers.forEach(t => {
        ids.push(t.id)
      })
      // 提交批量删除请求
      teacherApi.bacthDel(ids).then(r => {
        this.$message.success('删除成功')
        // 查询最新的数据显示
        this.pageList()
      })
    },
    // 表格 复选框选中状态改变时的回调事件
    handleSelectionChange(v) {
      // console.log('选中状态改变了: ', v)
      // 获取选中行的json对象集合
      this.checkedTeachers = v
    },

    queryByCondition() {
      this.pageList()
    },
    clear() {
      this.searchObj = {}
      this.pageNum = 1
      this.pageSize = 3
      this.pageList()
    },
    // 分页导航条事件函数
    handleSizeChange(size) {
      // console.log('size :' + size)
      this.pageSize = size
      this.pageList()
    },
    handleCurrentChange(num) {
      // console.log('num :' + num)
      this.pageNum = num
      this.pageList()
    },
    // 讲师列表分页查询
    pageList() {
      teacherApi.pageList(this.pageNum, this.pageSize, this.searchObj).then(r => {
        console.log(r)
        this.teacherList = r.data.page.records// 获取分页对象中的分页数据列表
        this.total = r.data.page.total
      })
    },
    // 处理编辑删除单击事件函数
    handleEdit(index, teacher) {
      // console.log(teacher)
      // 跳转到form页面 并将讲师id携带给下个页面
      /*
        路径参数：/teacher/edit/id
        请求参数：/teacher/edit?id=xxx
      */
      // this.$router.push('/teacher/edit?id=' + teacher.id)
      this.$router.push('/teacher/edit/' + teacher.id)
    },
    handleDelete(index, teacher) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacherApi.deleteById(teacher.id).then(r => {
          this.$message.success('删除成功')
          this.getTeachers()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getTeachers() {
      teacherApi.list().then((r) => {
        // console.log(r)
        this.teacherList = r.data.items
      })
    }
  }
}
</script>

